<template>
  <div class="songListTitle">
    <div class="back" @click="back"><i class="el-icon-back"></i></div>
    <div class="imgBox">
      <el-image :src="coverImgUrl" lazy></el-image>
    </div>

    <div class="songListItem">
      <div class="head">
        <el-tag type="danger" size="medium">歌单</el-tag>
        <div class="title">{{ name }}</div>
      </div>

      <!-- 歌单作者头像以及昵称  creator作者个人信息存放处-->
      <div class="createUser">
        <el-image :src="songList.songList.creator.avatarUrl" lazy></el-image>
        <!-- 歌单作者昵称 -->
        <div class="nickname">{{ songList.songList.creator.nickname }}</div>
        <!-- 创建时间 调用dateformat方法-->
        <div>创建于{{ songList.songList.createTime | dateFormat }}</div>
      </div>

      <!-- 播放按钮区 -->
      <div class="btn">
        <el-button type="danger" round size="medium" @click="playAll()"><i class="el-icon-video-play"></i> 播放全部
        </el-button>
        <el-button round size="medium" @click="subscribe()"><i class="el-icon-folder-add"></i> {{ subTest }}({{
            count
        }})</el-button>
        <el-button round size="medium" @click="share()"><i class="el-icon-share"></i>分享({{ shareCount }})</el-button>
      </div>

      <!-- 标签 -->
      <div class="tag">
        <div>标签:</div>
        <el-tag v-for="(item, i) in songList.songList.tags" :key="i">
          {{ item }}
        </el-tag>
      </div>

      <!-- 播放量以及歌曲数量 -->
      <div class="playCount">
        <div>歌曲:</div>
        <div>{{ songList.songList.trackCount }}</div>
        <div style="margin-left: 10px">播放量:</div>
        <div>
          {{
              songList.songList.playCount >= 10000
                ? (songList.songList.playCount / 10000).toFixed(0) + "万"
                : songList.songList.playCount
          }}
        </div>
      </div>

      <el-tooltip class="item" effect="dark" :content="description" placement="top">
        <!-- 简介 超出一行直接隐藏 -->
        <div class="desc">
          简介:
          {{ description }}
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['songList']), // 读取VUEX中的状态
  },
  mounted() {
    this.count = this.songList.songList.subscribedCount;
    this.shareCount = 0
    this.shareCount = this.songList.songList.shareCount;
    this.coverImgUrl = this.songList.songList.coverImgUrl
    this.name = this.songList.songList.name
    this.description = this.songList.songList.description
    if (localStorage.getItem('cookie') !== null) {
      this.ifSub();
    }
  },
  watch: {
    songList(newVal, oldVal) {
      this.count = newVal.songList.subscribedCount;
      this.shareCount = newVal.songList.shareCount;
      this.coverImgUrl = newVal.songList.coverImgUrl
      this.name = newVal.songList.name
      this.description = newVal.songList.description
      if (localStorage.getItem('cookie') !== null) {
        this.ifSub();
      }
    },
  },
  data() {
    return {
      subTest: '收藏',
      count: 0,
      shareCount: 0,
      subList: [],
      coverImgUrl: '',
      name: '',
      description: '',
    };
  },
  methods: {
    ...mapActions(['savePreSong', 'clickPlay', 'saveSubList']),
    // 直接他奶奶的一键emo[○･｀Д´･ ○]
    async playAll() {
      const cookie = localStorage.getItem('cookie');
      this.$api.scrobble({ sourceid: this.songList.songList.id, cookie, timestamp: this.$utils.timestamp() }).then((ret) => {
        console.log(ret)
      })
      await this.savePreSong({ preSong: 0 });
      await this.clickPlay({ ifPlay: false });
    },
    // 歌单的收藏
    subscribe() {
      if (localStorage.getItem('cookie') !== null) {
        if (this.subTest === '收藏') {
          this.getSub(1);
        } else {
          this.getSub(2);
        }
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    // 收藏的请求
    // t类型1是收藏  2是取消收藏
    async getSub(e) {
      console.log(e)
      const cookie = localStorage.getItem('cookie');
      this.$api
        .subList({ t: e, id: this.songList.songList.id, cookie, timestamp: this.$utils.timestamp() })
        .then((ret) => {
          if (ret.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            });
            if (e === 1) {
              this.count += 1;
            } else {
              this.count -= 1;
            }
            this.ifSub()
            this.subList = []
            this.$api.userPlayList({ uid: localStorage.getItem('uid'), timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret_) => {
              console.log(ret_)
              for (let i = 0; i < ret_.playlist.length; i++) {
                if (ret_.playlist[i].creator.userId === parseInt(localStorage.getItem('uid'))) {
                  continue
                } else {
                  this.subList.push(ret_.playlist[i])
                }
              }
              this.saveSubList({ subList: this.subList })
            })
          } else if (ret.code !== 200) {
            this.$message.error('操作失败');
          }
        });
    },

    // 为了判断是否已收藏
    async ifSub() {
      this.$api
        .subListData({
          id: this.songList.songList.id,
          cookie: localStorage.getItem('cookie'),
          timestamp: this.$utils.timestamp(),
        })
        .then((ret) => {
          if (ret.subscribed === true) {
            this.subTest = '取消收藏';
          } else {
            this.subTest = '收藏';
          }
        });
    },

    // 分享的按钮
    async share() {
      if (localStorage.getItem('cookie') !== null) {
        this.$api
          .share({
            id: this.songList.songList.id,
            type: 'playlist', // 歌单模式
            cookie: localStorage.getItem('cookie'),
            timestamp: this.$utils.timestamp(),
          })
          .then((ret) => {
            if (ret.code === 200) {
              this.$message({
                message: '分享成功',
                type: 'success',
              });
            }
          });
      } else {
        this.$message.error('此操作需要登录');
      }
    },

    back() {
      this.$router.push('/pageOne/recommend');
    },
  },
};
</script>

<style scoped>
.imgBox {
  width: 200px;
  max-width: 200px;
  max-width: 200px;
  margin-right: 20px;
  margin-left: 30px;
}

.back {
  position: absolute;
  font-size: 30px;
  left: 0;
  top: 0;
}

.el-image {
  width: 200px;
  border-radius: 10%;
}

.songListTitle {
  display: flex;
  align-items: center;
  position: relative;
}

.head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.head .el-tag {
  margin-right: 10px;
}

.createUser {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.createUser .el-image {
  width: 40px;
  max-width: 40px;
  max-width: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.nickname {
  margin-right: 5px;
}

.tag {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.tag .el-tag {
  margin-left: 5px;
}

.title {
  font-size: 24px;
  font-weight: 700;
}

.desc {
  width: 500px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playCount {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.btn {
  margin-bottom: 10px;
}
</style>
